<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lable Cloud and Widget Expandable Demo</title>
<script type="text/javascript" src="../lib/jquery/jquery-1.2.3.js"></script>
<script type="text/javascript" src="../src/blog/happy.labelCloud.js"></script>
<script type="text/javascript" src="../src/blog/happy.widgetExpand.js"></script>
<style>
.sidebar {
width:29%;
margin-right:5%;
float:right;
}
.sidebar h2 {
background-color:#FFD595;
color:#333333;
font-size:100%;
margin:1.6em 0pt 0.5em;
padding:4px 5px;
}
.sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
.sidebar li {
line-height:2em;
margin:0pt;
padding:0pt 0pt 0.5em 15px;
text-indent:-15px;
}
.sidebar {
color:#333333;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom:1em;
}
.sidebar .widget-content {
margin:0pt 5px;
}
.label-cloud li {
display:inline;
line-height:1.2;
padding:0pt 5pt 0pt 0pt;
text-indent:0pt;
}
.label-cloud li span {
display:none;
}
.label-cloud a {
font-weight:bold;
text-decoration:none;
}
.label-cloud a:hover {
text-decoration:underline;
}
.widget-expand {
float:right;
font-family:"Courier New",Courier,monospace;
}
</style>
<script>
$(document).ready(function(){
  //If in Page element editor, do nothing.
  if ($('div.draggable-widget').length > 0) {
    return;
  }
	Happy.LabelCloud.TARGET_ID = "#Label1";
  Happy.LabelCloud.cloudIt(Happy.LabelCloud.weightStyle);
	Happy.WidgetExpand.TARGET_WIDGET.push({css:'#BlogArchive1',close:true},{css:'#Subscribe1',close:true},{css:'#BlogList1',close:false});
  Happy.WidgetExpand.attachIt();
});
</script>
</head>

<body>
<div id="sidebar" class="sidebar section">

<div id="Profile1" class="widget Profile">
<h2>About Me</h2>
<div class="widget-content">
<dl class="profile-datablock">
<dt class="profile-data">HappyMonster</dt>
<dd class="profile-textblock">尋找生命的意義</dd>
</dl>
<a href="http://www.blogger.com/profile/09835638685125578295" class="profile-link">檢視我的完整簡介</a>
</div>
</div>

<div id="Label1" class="widget Label">
<h2>Labels</h2>
<div class="widget-content">
<ul>
<li>
<a href="http://happydraft.blogspot.com/search/label/Blogger.com" dir="ltr">
Blogger.com
</a>
<span dir="ltr">(2)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Cross%20Domain" dir="ltr">
Cross Domain
</a>
<span dir="ltr">(2)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Feature" dir="ltr">
Feature
</a>
<span dir="ltr">(2)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Javascript" dir="ltr">
Javascript
</a>
<span dir="ltr">(2)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Tool" dir="ltr">
Tool
</a>
<span dir="ltr">(2)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Google" dir="ltr">
Google
</a>
<span dir="ltr">(1)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/HTML" dir="ltr">
HTML
</a>
<span dir="ltr">(1)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Search" dir="ltr">
Search
</a>
<span dir="ltr">(1)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Tag" dir="ltr">
Tag
</a>
<span dir="ltr">(1)</span>
</li>
<li>
<a href="http://happydraft.blogspot.com/search/label/Template" dir="ltr">
Template
</a>
<span dir="ltr">(1)</span>
</li>
</ul>
</div>
</div>

<div id="BlogArchive1" class="widget BlogArchive">
<h2>Archives</h2>
<div class="widget-content">
xxx
</div>
</div>

<div id="Subscribe1" class="widget Subscribe">
<h2 class="title">訂閱</h2>
<div class="widget-content">
xxx
</div>
</div>

<div id="BlogList1" class="widget BlogList">
<div id="blog-list-title">
<h2 class="title">我的網誌清單</h2>
</div>
<div class="widget-content">
<div class="blog-list-container">
<div class="blog-icon">
</div>
<div class="blog-content">
<div class="blog-title">
<a target="_blank" href="http://ajaxian.com">
Ajaxian</a>
</div>
<div class="item-title">
JS Time Machine
</div>
<div class="item-time">
1 小時以前
</div>
</div>
<div class="blog-icon">
</div>
<div class="blog-content">
<div class="blog-title">
<a target="_blank" href="http://bloggerindraft.blogspot.com/">
Blogger in Draft</a>
</div>
<div class="item-title">
Unified Gadget / Page Element Directory
</div>
<div class="item-time">
5 天以前
</div>
</div>
<div class="blog-icon">
</div>
<div class="blog-content">
<div class="blog-title">
<a target="_blank" href="http://yuiblog.com/blog">
Yahoo! User Interface Blog</a>
</div>
<div class="item-title">
Pattern-mining call for proposals: Rich interaction (web 2.0) patterns
</div>
<div class="item-time">
1 週以前
</div>
</div>
</div>
</div>
</div>

<div id="HTML1" class="widget HTML">
<h2 class="title">Blog Info</h2>
<div class="widget-content">
</div>
</div>

</div>
</body>
</html>
